<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/6.5.0/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/6.5.0/ol.js"></script>
    <style>
        .map {
            height: 900px;
            width: 100%;
        }
        /* 显示鼠标信息的自定义样式设置 */
        .custom-mouse-position {
            color: red;
            font-size: 16px;
            font-family: "微软雅黑";
        }
        #mouse-position {
            float: left;
            position: absolute;
            bottom: 5px;
            width: 200px;
            height: 20px;
            /* 将z-index设置为显示在地图上层 */
            z-index: 2000;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <div id="mouse-position"></div>
    <script type="text/javascript">
        // 初始化地图，默认使用OSM地图
        var map = new ol.Map({
            // 容器
            target: 'map',
            // 图层集合(数组可以放置多个)
            layers: [
                // 创建第一个图层，也是地图底图
                new ol.layer.Tile({
                    title: "天地图路网",
                    source: new ol.source.XYZ({
                        url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63"
                    })
                }),
                new ol.layer.Tile({
                    title: "天地图文字标注",
                    source: new ol.source.XYZ({
                        url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63'
                    })
                })
            ],
            // 同时加载的最大瓦片数(默认为16)
            maxTilesLoading: 16,
            // 视图
            view: new ol.View({
                /*constrainRotation: 90,
                enableRotation: true,*/
                // 限制视图的范围，换句话说，超出此范围的任何内容都无法在地图上看到
                // extent:[120,30,140,50],
                // 坐标系（默认：EPSG:3857）
                // 初始位置(经纬度转墨卡托)
                projection : 'EPSG:4326',
                // center: this.lonLatToMercator(this.defaultLocation),
                center: [112.46261468487126, 34.66450747066452],
                // 初始大小
                zoom: 7,
                //最小缩放级别
                minZoom: 1,
                //最大缩放级别
                maxZoom: 15,
            }),
        });
        //鼠标获取坐标控件
        const mousePositionControl = new ol.control.MousePosition({
            // 投影坐标格式：显示小数点后面多少位小数
            coordinateFormat: ol.coordinate.createStringXY(5),
            /*coordinateFormat: function (coordinate) {
                return ol.coordinate.format(coordinate, '经度:{x} 纬度:{y}', 2);
            },*/
            // 投影坐标系
            projection: 'EPSG:4326',
            // 目标容器（没有容器默认右上角）
            target: document.getElementById('mouse-position'),
            // 坐标信息显示样式
            className: 'custom-mouse-position',
            // 未定义坐标的标记
            undefinedHTML: ' '
        });
        // 添加控件到地图
        map.addControl(mousePositionControl);

        // 地图鼠标滑动事件
        map.on('pointermove', function(evt) {
            var pixel = map.getEventPixel(evt.originalEvent);
        })


    </script>
</body>
</html>